<template>
  <div  v-if="dataList.length">
    <div class="title">周末去哪儿</div>
    <div class="product" v-for="item of dataList" :key="item.id">
      <div class="product-img">
        <img :src="item.imgUrl"/>
      </div>
      <div class="product-info">
        <p>{{item.name}}</p>
        <p>{{item.desc}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
    dataList: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/mixins.styl"
.title
  margin: .25rem 0
  color: #212121
  font-size: .32rem
  height: .44rem
  line-height: .44rem
  background: #eee
  text-indent: .2rem
.product
  .product-img
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 37.2168%
    img
      width: 100%
  .product-info
    padding .14rem .2rem .2rem .2rem
    :nth-child(1)
      ellipsis()
      color: #212121
      font-size: .28rem
      line-height: .48rem
    :nth-child(2)
      ellipsis()
      color: #616161
      font-size: .24rem
      line-hight: .42rem
</style>
